import 'package:flutter/material.dart';
import 'package:flutter_ability/custom_ui.dart';

class BadgePage extends StatefulWidget {
  const BadgePage({Key? key}) : super(key: key);

  @override
  State<BadgePage> createState() => _BadgePageState();
}

class _BadgePageState extends State<BadgePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: YJAppBar(
        isScaffold: true,
        leadingType: YJAppBarType.back,
        title: TextView.text("角标"),
        backgroundColor: YJColors.WHITE,
      ),
      backgroundColor: YJColors.BACKGROUND_COLOR,
      body: Container(
        padding: const EdgeInsets.only(top: 20, left: 16, right: 16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextView.text('无边框'),
            const SizedBox(height: 10),
            Container(
                color: Colors.transparent,
                padding: const EdgeInsets.symmetric(vertical: 16),
                child: Row(
                  children: const [
                    YJBadge(
                      shape: YJBadgeShape.pills,
                      text: "99+",
                    ),
                    SizedBox(width: 10),
                    YJBadge(
                      shape: YJBadgeShape.pills,
                      text: "2",
                    ),
                    SizedBox(width: 10),
                    YJBadge(
                      shape: YJBadgeShape.pills,
                      text: "99+",
                    ),
                  ],
                )),
            const SizedBox(height: 10),
            TextView.text('有边框'),
            const SizedBox(height: 10),
            Container(
              color: Colors.black87,
              padding: const EdgeInsets.symmetric(vertical: 16),
              child: Row(
                children: const [
                  YJBadge(
                    shape: YJBadgeShape.pills,
                    text: "",
                    border: BorderSide(
                      color: Colors.white,
                      width: 1,
                    ),
                  ),
                  SizedBox(width: 10),
                  YJBadge(
                    shape: YJBadgeShape.pills,
                    text: "2",
                    border: BorderSide(
                      color: Colors.white,
                      width: 1,
                    ),
                  ),
                  SizedBox(width: 10),
                  YJBadge(
                    shape: YJBadgeShape.pills,
                    text: "99+",
                    border: BorderSide(
                      color: Colors.white,
                      width: 1,
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 10),
            TextView.text('按钮角标'),
            const SizedBox(height: 10),
            Container(
                color: Colors.transparent,
                padding: const EdgeInsets.symmetric(vertical: 16),
                alignment: Alignment.centerLeft,
                child: Row(
                  children: [
                    YJButtonBadge(
                      onPressed: () {
                        print("YJButtonBadge");
                      },
                      text: 'YJButtonBadge',
                      icon: const YJBadge(
                        child: Text("12"),
                      ),
                    ),
                  ],
                )),
            const SizedBox(height: 10),
            TextView.text('图标角标'),
            const SizedBox(height: 10),
            Container(
                color: Colors.transparent,
                padding: const EdgeInsets.symmetric(vertical: 16),
                alignment: Alignment.centerLeft,
                child: Row(
                  children: [
                    YJIconBadge(
                      counterChild: const YJBadge(
                        shape: YJBadgeShape.circle,
                        child: Text("12"),
                      ),
                      child: YJIconButton(
                        onPressed: () {},
                        color: YJColors.THEME_COLOR,
                        icon: const Icon(Icons.ac_unit),
                      ),
                    ),
                    YJIconBadge(
                      counterChild: const YJBadge(
                        shape: YJBadgeShape.circle,
                        child: Text("12"),
                      ),
                      child: YJButton(onPressed: () {}, text: "YJButton"),
                    ),
                    const SizedBox(width: 16),
                    YJIconBadge(
                      counterChild: const YJBadge(
                        shape: YJBadgeShape.circle,
                        border: BorderSide(
                          color: Colors.white,
                          width: 2,
                        ),
                      ),
                      position: YJBadgePosition(
                          start: YJSize.dp(-4), top: YJSize.dp(-4)),
                      child: YJIconButton(
                        onPressed: () {},
                        size: YJSize.dp(40),
                        color: YJColors.THEME_COLOR,
                        icon: const Icon(Icons.info),
                      ),
                    ),
                  ],
                )),
            const SizedBox(height: 10),
            TextView.text('图标角标2'),
            const SizedBox(height: 10),
            Container(
                color: Colors.transparent,
                padding: const EdgeInsets.symmetric(vertical: 16),
                alignment: Alignment.centerLeft,
                child: Row(
                  children: [
                    // YJIconBadge(
                    //   counterChild: const YJBadge(
                    //     shape: YJBadgeShape.pills,
                    //     text: "",
                    //   ),
                    //   position: YJBadgePosition(
                    //       start: YJSize.dp(20), bottom: YJSize.dp(20)),
                    //   child: Image.asset('assets/icon_img7.png',
                    //       width: 22, height: 22),
                    // ),
                    // YJIconBadge(
                    //   counterChild: const YJBadge(
                    //     shape: YJBadgeShape.pills,
                    //     text: "9",
                    //   ),
                    //   position: YJBadgePosition(
                    //       start: YJSize.dp(14), bottom: YJSize.dp(14)),
                    //   child: Image.asset('assets/icon_img7.png',
                    //       width: 22, height: 22),
                    // ),
                    // YJIconBadge(
                    //   counterChild: const YJBadge(
                    //     shape: YJBadgeShape.pills,
                    //     text: "99+",
                    //   ),
                    //   position: YJBadgePosition(
                    //       start: YJSize.dp(14), bottom: YJSize.dp(14)),
                    //   child: Image.asset('assets/icon_img7.png',
                    //       width: 22, height: 22),
                    // ),

                    YJIconBadge(
                      counterChild: const YJBadge(
                        shape: YJBadgeShape.pills,
                        text: "9",
                      ),
                      position: YJBadgePosition(
                          start: YJSize.dp(14), bottom: YJSize.dp(14)),
                      child: Image.asset('assets/icon_img7.png',
                          width: 22, height: 22),
                    ),
                  ],
                )),
          ],
        ),
      ),
    );
  }
}
